<template>
  <div class="violations" ref="Violations"></div>
</template>
<script>
import * as echarts from "echarts";
import { getHourViolations } from '@/api/home/home'
import monent from 'moment'
export default {
  name: "Violations",
  props: {
    date: {
      type: [ Number, Date],
      // required: true
    }
  },
  data() {
    return {
      chartDom: null,
      option: {},
    };
  },
  computed: {
    formatDate() {
      return monent(this.date).format('yyyy-MM-DD')
    }
  },
  mounted() {
    // this.init();
    this.getData()
    window.addEventListener("resize", this.resize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resize);
  },
  watch: {
    date: {
      handler(val) {
        console.log('val',val)
        this.getData()
      }
    }
  },
  methods: {
    getData() {
      getHourViolations({date: this.formatDate}).then(response => {
        const data = []
        const dataX = []
        response.data.map((item,index) => {
          dataX.push(item.hour)
          data.push(item.count)
        })
        // this.chartDom.setOption(this.option)
        this.init(dataX ,data)
      })
    },
    init(dataX, data) {
      this.chartDom = echarts.init(this.$refs.Violations);
      this.option = {
        grid: {
          top: '40px',
          left: '30px',
          bottom: '60px',
          right: "0",
        },
        xAxis: {
          type: "category",
          data: dataX,
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#162436"
            }
          },
          axisLabel: {
            // interval: 0,
            textStyle: {
              color: "#8A99A6",
              align: "center",
              fontSize: '0.875rem'
            },
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: "value",
          name: "(次)",
          nameTextStyle: {
            color: "#FFFFFF",
            padding: [0, "30", 0, "0"],
            fontSize: '0.875rem'
          },
          minInterval: 1,
          splitLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: "#8A99A6",
              fontSize: '0.875rem'
            },
          },
        },
        series: [
          {
            type: "bar",
            barWidth: 18,
            legendHoverLink: false,
            showBackground: true,
            silent: true,
            data: data,
            itemStyle: {
              normal: {
                color: "#50B0B5",
              },
            },
            z: 1,
            animationEasing: "elasticOut",
          },
          {
            type: "pictorialBar",
            showBackground: true,
            itemStyle: {
              normal: {
                color: "#061348",
              },
            },
            symbolRepeat: "fixed",
            symbolMargin: 2, // 小格子的宽
            symbol: "rect",
            symbolClip: true,
            symbolSize: [18, 4],
            symbolOffset: [0, 6],
            symbolPosition: "start",
            // symbolBoundingData: 4,
            data: data,
            z: 2,
            animationEasing: "elasticOut",
          },
        ],
      };
      this.chartDom.setOption(this.option);
      // this.getData()
    },
    resize() {
      this.chartDom.resize();
    },
  },
};
</script>
<style lang="scss" scoped>
.violations {
  width: 100%;
  height: 16.333333333333332rem;
}
</style>
